<template>
	<view>
		<!-- 历史记录 -->
		<view class="hotsAll">
			<!-- 上面文字和图标 -->
			<view class="hots-t">
				<view class="hots-t-l">历史记录</view>
				<view class="hots-t-r">
					<image src="../../static/垃圾桶.png" mode="aspectFill" class="hots-t-img" @click="lajiclear"></image>
				</view>
			</view>
			<!-- 热门标签栏 -->
			<view class="label">
				<text class="label-s" v-for="(item,index) in historyList" :key="index" @click="clickLabel(item)">
					{{item}}
				</text>
			</view>
		</view>

		<!-- 热门搜索 -->
		<view class="hotsAll">
			<!-- 上面文字和图标 -->
			<view class="hots-t">
				<view class="hots-t-l">热门搜索</view>
				<view class="hots-t-r">
					<image src="../../static/垃圾桶.png" mode="aspectFill" class="hots-t-img" v-show="false"></image>
				</view>
			</view>
			<!-- 热门标签栏 -->
			<view class="label">
				<text :class="item.is_hot==1?'active':'label-s'" v-for="(item,index) in hotsList" :key="index"
					@click="clickLabel(item.keyword)">
					{{item.keyword}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hots",
		props: ['hotsList', 'historyList'],
		data() {
			return {

			};
		},
		methods: {
			// 清空历史记录
			lajiclear() {
				this.$request({
					url: "/search/clearhistory",
					successCb: res => {
						this.$emit('lajiclear')
					}
				})
			},
			// 点击标签搜索
			clickLabel(item) {
				this.$emit('clickLabel', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hotsAll {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 20rpx;
		margin-bottom: 50rpx;

		.hots-t {
			display: flex;
			justify-content: space-between;

			.hots-t-l {
				margin-bottom: 20rpx;
				font-size: 35rpx;
				font-family: '黑体';
			}

			.hots-t-r {
				.hots-t-img {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}

		.label {
			display: flex;
			flex-wrap: wrap;

			.label-s {
				color: #9d9ea0;
				border: 1px solid #9d9ea0;
				border-radius: 5rpx;
				font-size: 20rpx;
				padding: 0 5rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.active {
				color: red;
				border: 1px solid red;
				border-radius: 5rpx;
				font-size: 20rpx;
				padding: 0 5rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
